{% extends '::base.html.twig' %}

{% block title %}Search for Calls and Projects{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    #main, .wrapper, #content, .entry, .content-frame, .frame {
        overflow: visible !important;
    }
    #footerbar .wrapper, #bottombar .wrapper {
        overflow: hidden !important;
    }
</style>
{% endblock %}

{% block topbar %}
<div id="topbar" style="background: url('/images/green.png') repeat-x scroll 0 0 #B0B0B0">
    <strong class="wrapper">
        Search for Calls and Projects
    </strong>
</div>
{% endblock %}

{% block bodyclass %} class="fullwidth"{% endblock %}

{% block body %}
<div class="wrapper">
    <div id="content">
        <div class="entry">

            <form id="searchForm" action="{{ url('search_results') }}" method="post" {{ form_enctype(form) }}>
                <fieldset class="content-frame">
                    <legend>search</legend>
                    <label>All<input type="radio" name="type" value="0" onfocus="changeForm(0)" checked="checked" /></label>
                    <label>grant/mobility<input type="radio" name="type" value="call" onfocus="changeForm(1)" /></label>
                    <label>project<input type="radio" name="type" value="project" onfocus="changeForm(2)" /></label>
                    {{ form_errors(form) }}

                    <div id="projectType">
                        {{ form_label(form.projectType) }}
                        {{ form_errors(form.projectType) }}
                        {{ form_widget(form.projectType) }}
                    </div>

                    <div id="mobilityLevel">
                        {{ form_label(form.mobilityLevel) }}
                        {{ form_errors(form.mobilityLevel) }}
                        {{ form_widget(form.mobilityLevel) }}
                    </div>

                    <div id="fundingAgencies">
                        {{ form_label(form.fundingAgency) }}
                        {{ form_errors(form.fundingAgency) }}
                        {{ form_widget(form.fundingAgency) }}
                    </div>

                    <div id="studyField">
                        {{ form_label(form.studyField) }}
                        {{ form_errors(form.studyField) }}
                        {{ form_widget(form.studyField) }}
                    </div>

                    <div id="country">
                        {{ form_label(form.country) }}
                        {{ form_errors(form.country) }}
                        {{ form_widget(form.country) }}
                    </div>

                    <div id="scope">
                        {{ form_label(form.scope) }}
                        {{ form_errors(form.scope) }}
                        {{ form_widget(form.scope) }}
                    </div>

                    {{ form_rest(form) }}
                    <br />
                    <p>
                        <button type="button" onclick="$('#Kateba_goobundle_searchtype_page').attr('value', 1); getResults();">Search</button>
                    </p>
                </fieldset>
            </form>

            <div class="big-spacer"></div>
            
            <div id="search"></div>

        </div>
        <!-- END .entry -->

    </div>
    <!-- END #content -->      

</div>
<!-- END .wrapper -->
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    $('select').chosen();
    function getResults(){
        $.ajax({
            url: "{{ url('search_results') }}",
            data: $('#searchForm').serialize(),
            success: function(data) {
                $('#search').html(data);
            }
        });
    }
    
    function changeForm(index) {
        switch(index) {
            case 0:
                $('#country').show();
                $('#mobilityLevel').show();
                $('#projectType').show();
                $('#scope').show();
                break;
            case 1:
                $('#country').show();
                $('#mobilityLevel').show();
                $('#projectType').hide();
                $('#scope').hide();
                break;
            case 2:
                $('#country').hide();
                $('#mobilityLevel').hide();
                $('#projectType').show();
                $('#scope').show();
                break;
        }
    }
</script>
{% endblock %}